import React,{useEffect, useState} from 'react'
import "./App.css"



import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
export default function App(){
  //状态提升，把数据放在App中
  // 初始化todoList数据
  const[todoList, setTodoList] =useState([])

  // 刚渲染App的时候，去本地存储中查看是否保存有数据
  useEffect(() => {
    setTodoList(JSON.parse(localStorage.getItem("todoList")) || [])
  }, [])


  // 监听todoList如果发生改变，则在本地中保存
  useEffect(() => {
    localStorage.setItem("todoList", JSON.stringify(todoList))
  }, [todoList])



  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header setTodoList={setTodoList} todoList={todoList} />
        <List todoList={todoList} setTodoList={setTodoList} />
        <Footer todoList={todoList} setTodoList={setTodoList} />
      </div>
    </div>
  )
}

